import React, { useState, useEffect } from 'react'
import './style.less'
import { Consumer } from '../../utils/context'
import { Typography, Button, Menu, Dropdown, Divider, Space } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import {
    pjfGradeAll,
    pjfGradeByKemu,
    totalScoreEchartY,
    score150EchartY
} from './workGrade'
import echarts from 'echarts'

const { Title, Text } = Typography

function AnalyseGrade(props) {
    const { classData, studentData, baseValue, choiceExamInfo } = props.value
    const [chart1X, setChart1X] = useState([])
    const [chart1Data, setChart1Data] = useState([])
    const [choiceKemu, setChoiceKemu] = useState('科目列表')

    const getChart1X = (min, max, space) => {
        let list = []
        for (let i = min; i <= max; i = i + space) {
            list.push(i)
        }
        return list
    }

    useEffect(() => {
        if (choiceExamInfo.no) {
            // console.log(classData)
            // 图表1配置
            const myChart1 = echarts.init(
                document.getElementsByClassName('echart-1')[0]
            )
            myChart1.setOption({
                title: {
                    text: '年级成绩分布'
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name: '分数',
                    type: 'category',
                    boundaryGap: false,
                    data: chart1X
                },
                yAxis: {
                    name: '人数',
                    type: 'value'
                },
                series: [
                    {
                        name: '人数',
                        type: 'line',
                        data: chart1Data,
                        smooth: true
                    }
                ]
            })
        }
    }, [baseValue, chart1Data, chart1X, choiceExamInfo.no, classData])

    const choiceKemuButtonEvent = (e) => {
        // console.log(e)
        setChoiceKemu(e.key)
        switch (e.key) {
            case '总分':
                setChart1X(getChart1X(0, 750, 25))
                setChart1Data(totalScoreEchartY(baseValue, choiceExamInfo.no))
                break
            case '语文':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'chinese')
                )
                break
            case '数学':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'math')
                )
                break
            case '英语':
                setChart1X(getChart1X(0, 150, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'eglish')
                )
                break
            case '物理':
                setChart1X(getChart1X(0, 120, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'physics')
                )
                break
            case '化学':
                setChart1X(getChart1X(0, 110, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'chemistry')
                )
                break
            case '生物':
                setChart1X(getChart1X(0, 75, 5))
                setChart1Data(
                    score150EchartY(baseValue, choiceExamInfo.no, 'biology')
                )
                break
            default:
                break
        }
    }
    const menu = (
        <Menu
            onClick={(e) => {
                choiceKemuButtonEvent(e)
            }}
        >
            <Menu.Item key="总分">总分</Menu.Item>
            <Menu.Item key="语文">语文</Menu.Item>
            <Menu.Item key="数学">数学</Menu.Item>
            <Menu.Item key="英语">英语</Menu.Item>
            <Menu.Item key="物理">物理</Menu.Item>
            <Menu.Item key="化学">化学</Menu.Item>
            <Menu.Item key="生物">生物</Menu.Item>
        </Menu>
    )
    return choiceExamInfo.no ? (
        <div className="analyse-grade-container">
            <Title>
                <span>{choiceExamInfo.name}</span>
            </Title>
            <Divider />
            <div className="total-number-box">
                <Space size="large">
                    <Text>
                        班级数：
                        <Text strong type="danger">
                            {classData.length}
                        </Text>
                    </Text>
                    <Text>
                        总人数：
                        <Text strong type="danger">
                            {studentData.length}
                        </Text>
                    </Text>
                </Space>
            </div>
            <Divider />
            <div className="total-pjf-box">
                <Title level={3}>总平均分：</Title>
                <Text strong type="danger">
                    {choiceExamInfo.no
                        ? pjfGradeAll(baseValue, choiceExamInfo.no).toFixed(1)
                        : '空'}
                </Text>
                <span className="total-score">满分：750</span>
            </div>
            <Title level={3}>各科平均分：</Title>
            <div className="kemu-pjf-box">
                <Space size="large">
                    <Text>
                        语文：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'chinese'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /150
                    </Text>
                    <Text>
                        数学：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'math'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /150
                    </Text>
                    <Text>
                        英语：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'eglish'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /150
                    </Text>
                </Space>
            </div>
            <div>
                <Space size="large">
                    <Text>
                        物理：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'physics'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /120
                    </Text>
                    <Text>
                        化学：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'chemistry'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /108
                    </Text>
                    <Text>
                        生物：
                        <Text strong type="danger">
                            {choiceExamInfo.no
                                ? pjfGradeByKemu(
                                      baseValue,
                                      choiceExamInfo.no,
                                      'biology'
                                  ).toFixed(1)
                                : '空'}
                        </Text>
                        /72
                    </Text>
                </Space>
            </div>
            <Divider />
            <div>
                <span>请选择科目名称：</span>
                <Dropdown overlay={menu}>
                    <Button type="primary">
                        {choiceKemu} <DownOutlined />
                    </Button>
                </Dropdown>
            </div>
            <div className="echart-1"></div>
        </div>
    ) : (
        <></>
    )
}

function hoc(A) {
    return () => {
        return (
            <Consumer>
                {(value) => {
                    return <A value={value} />
                }}
            </Consumer>
        )
    }
}

export default hoc(AnalyseGrade)
